<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="divport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: SimSun, serif;
        }

        .cont {
            padding: 36px 16px;
            background-color: #00AA70;
            overflow: hidden;
        }

        .titleBox {
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .titleBox img {
            position: absolute;
            right: 0;
            top: 0;
            width: 94px;
            height: 94px;
            border-radius: 10px;
            margin-top: 4px;
        }

        .title {
            font-size: 44px;
            line-height: 58px;

        }

        .text {
            font-size: 24px;
            line-height: 32px;
            margin-top: 8px;
            opacity: .5;
        }

        .listBox {
            background-color: #F3F4F9;
            margin-top: 20px;
            border-radius: 16px;
            padding: 12px 16px 50px 16px;
            overflow: hidden;
        }

        .item,
        .themeListItem {
            width: 100%;
            height: 100%;
            overflow: hidden !important;
        }

        .date {
            float: left;
            width: 70px;
            color: #767885;
            text-align: end;
        }

        .monthDayStr {
            font-size: 28px;
            line-height: 38px;
            margin-top: 40px;
            white-space: nowrap;
        }

        .yearStr {
            font-size: 24px;
            line-height: 32px;
        }

        .axes {
            float: left;
            width: 8px;
            background-color: #00AA70;
            margin-left: 62px;
        }

        .topAxes {
            width: 8px;
            height: 56px;
            /* border-radius: 8px 8px 0 0; */
        }

        .timeIcon {
            position: relative;
            width: 36px;
            height: 36px;
            margin-left: -14px;
            z-index: 99;
        }

        .timeIcon img {
            width: 100%;
            height: 100%;
        }

        .botAxes {
            height: 100%;
            width: 8px;
        }

        .mainString {
            /* position: absolute; */
            width: 8px;
            height: 100%;
            background-color: #00AA70;
        }


        .itemInfo {
            width: 80%;
            margin-left: 180px;
            background-color: #DFE1EB;
            border-radius: 20px;
            /* overflow: hidden; */
            margin-top: 14px;
            margin-bottom: 46px;
        }

        .theme {
            background-color: #fff;
            padding: 10px 26px 10px 10px;
            border-radius: 20px 20px 0 0;
            position: relative;
        }

        .themeLeft {
            position: relative;
        }

        .themeLeftImg{
            width: 100px;
            height: 100px;
            border-radius: 20px;
            overflow: hidden;
        }
        .themeLeftImg img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }

        .themeInfo {
            position: absolute;
            left: 120px;
            top: 0;
            margin-left: 16px;
            color: #171719;
        }

        .themeName {
            font-size: 28px;
            line-height: 38px;
            margin-top: 10px;
            font-weight: 800;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .themeAuthor {
            font-size: 20px;
            line-height: 26px;
            margin-top: 16px;
            opacity: .5;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .themeAuthorss{
            width: 140px;
            margin-top: 40px;
        }
        .themeRight {
            position: absolute;
            right: 15px;
            top: 30px;
        }
        .themeNum {
            font-size: 28px;
            line-height: 38px;
            margin-top: 10px;
            font-weight: 800;
        }

        .themeList {
            padding: 8px 16px 0;
        }

        /* 循环一个主题下商品的样式数据微调 */
        .themeLists {
            /* display: flex;
            flex-direction: column; */
            /* overflow-y: auto; */
        }

        .monthDayStrs {
            font-size: 24px;
            line-height: 32px;
            margin-top: 30px;
        }

        .yearStrs {
            font-size: 20px;
            line-height: 26px;
        }

        .axess {
            margin-left: 26px;
        }

        .topAxess {
            position: relative;
            width: 4px;
            height: 44px;
        }

        .timeIcons {
            width: 28px;
            height: 28px;
            margin-left: -10px;
        }

        .timeIcons img {
            width: 100%;
            height: 100%;
            display: block;
            margin: 0;
            padding: 0;
        }

        .botAxess {
            height: 71px;
            width: 4px;
        }

        .itemInfos {
            height: 80px;
            margin-left: 136px;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 16px;
        }

        .themes {
            border-radius: 8px;
        }

        .themeLefts img {
            width: 56px;
            height: 56px;
            border-radius: 8px;
        }
        .themeInfos{
            left: 68px;
        }
        .themeNames {
            width: 400px;
            font-size: 24px;
            line-height: 32px;
            margin-top: -2px;
            font-weight: 800;
        }

        .themeAuthors {
            width: 400px;
            font-size: 20px;
            line-height: 28px;
            margin-top: 0;
        }

        .themeRights {
            display: flex;
            align-items: center;
        }

        .handleThemes {
            /* width: 60px; */
            padding: 0 8px;
            height: 28px;
            font-size: 20px;
            line-height: 28px;
            text-align: center;
            color: #fff;
            background-color: #00AA70;
            border-radius: 8px;
            display: inline-block;
        }
        .handleThemess{
            position: absolute;
            right: 0;
        }

        .chushi {
            width: 50%;
            position: absolute;
            left: 180px;
            font-size: 36px;
            line-height: 48px;
            color: #767885;
            font-weight: 800;
            margin-top: 52px;
            margin-left: 20px;
        }

        .botBox {
            position: relative;
        }

        .botText {
            color: #fff;
            font-size: 24px;
            line-height: 32px;
            margin-top: 14px;
        }

        .botBox img {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 156px;
            height: 156px;
            background-color: #fff;
            border-radius: 16px;
            overflow: hidden;
            border: 6px solid #00AA70;
        }
    </style>
</head>

<body>
<div class="image-box" style="width: 100%;background-color: #00AA70;">
    <div class="cont" id="cont">
        <div class="titleBox">
            <div class="boxLeft">
                <div class="title">
                    ${userName}的${shopShortName}生涯
                </div>
                <div class="text">
                    注:数据统计时间截至${endTime}
                </div>
            </div>
            <img src="${sourceUrl}/treeImg/caitou.png"/>
        </div>
        <div class="listBox">

            <#list mapList as t>
                <div class="item">
                    <div class="date">
                        <div class="monthDayStr">
                            ${t.monthDayStr}
                        </div>
                        <div class="yearStr">
                            ${t.yearStr}
                        </div>
                    </div>
                    <div class="axes">
                        <div class="topAxes">
                            <div class="mainString"></div>
                        </div>
                        <div class="timeIcon">
                            <img src="${sourceUrl}/treeImg/timeIcon.png"/>
                        </div>
                        <div class="botAxes">
                            <div class="mainString"></div>
                        </div>
                    </div>
                    <div class="itemInfo" style="position: relative;">
                        <div style="position: absolute;
                                width: 8px;
                                height: ${(t.count * 270)?c}px;
                                background-color: #00AA70;
                                left: -48px;
                                top: 50px;
                                z-index: 9;"/>

                        <#if (t.count > 1)>
                            <div class="theme">
                                <div class="themeLeft">
                                    <div class="themeLeftImg">
                                        <img src="${t.shortUrl?contains('http')?string('',sourceUrl)}${t.shortUrl}"/>
                                    </div>
                                    <div class="themeInfo">
                                        <div class="themeName">
                                            ${t.dawName}
                                        </div>
                                        <div class="themeAuthor">
                                            ${t.author}
                                        </div>

                                    </div>
                                </div>
                                <div class="themeRight">
                                    <div class="themeNum">${t.count}个</div>
                                </div>
                            </div>
                        </#if>

                        <#if (t.count = 1)>
                            <div class="theme" style="border-radius: 20px">
                                <div class="themeLeft">
                                    <div class="themeLeftImg">
                                        <img src="${t.shortUrl?contains('http')?string('',sourceUrl)}${t.shortUrl}"/>
                                    </div>
                                    <div class="themeInfo">
                                        <div class="themeName">
                                            ${t.dawName}
                                        </div>
                                        <div class="themeAuthor">
                                            ${t.author}
                                        </div>
                                    </div>
                                </div>
                                <div class="themeRight">
                                    <#if (t.personTreeNftVOList[0].sceneTypeName!) != ''>
                                        <div class=" handleThemes handleThemess">${t.personTreeNftVOList[0].sceneTypeName}</div>
                                    </#if>
                                    <div class="themeAuthor themeAuthorss">
                                        ${t.personTreeNftVOList[0].tokenId?substring(0,6)}...${t.personTreeNftVOList[0].tokenId?substring(t.personTreeNftVOList[0].tokenId?length - 6)}
                                    </div>
                                </div>
                            </div>
                        </#if>
                        <#if (t.count > 1)>
                            <div class="themeList themeLists">
                                <#list t.personTreeNftVOList as prod>
                                    <div class="themeListItem">
                                        <div class="date dates">
                                            <div class="monthDayStr monthDayStrs">
                                                ${prod.monthDayStr}
                                            </div>
                                            <div class="yearStr yearStrs">
                                                ${prod.yearStr}
                                            </div>
                                        </div>
                                        <div class="axes axess">
                                            <div class="topAxes topAxess">
                                                <div class="mainString"></div>
                                            </div>
                                            <div class="timeIcon timeIcons">
                                                <img src="${sourceUrl}/treeImg/timeIcon.png"/>
                                            </div>

                                            <#if prod_index + 1 != t.count>
                                                <div class="botAxes botAxess">
                                                    <div class="mainString">
                                                    </div>
                                                </div>
                                            </#if>

                                        </div>
                                        <div class="itemInfo itemInfos">
                                            <div class="theme themes">
                                                <div class="themeLeft themeLefts">
                                                    <img src="${t.shortUrl?contains('http')?string('',sourceUrl)}${t.shortUrl}"/>
                                                    <div class="themeInfo themeInfos">
                                                        <div class="themeName themeNames">
                                                            ${prod.dawProductCode}
                                                        </div>
                                                        <div class="themeAuthor themeAuthors">
                                                            ${prod.tokenId}
                                                        </div>
                                                    </div>
                                                </div>

                                                <#if (prod.sceneTypeName!) != ''>
                                                    <div class="themeRight themeRights">
                                                        <div class=" handleThemes">${prod.sceneTypeName}</div>
                                                    </div>
                                                </#if>

                                            </div>
                                        </div>
                                    </div>
                                </#list>
                            </div>
                        </#if>
                    </div>
                </div>
            </#list>
            <div class="item" style="height: 110px;">
                <div class="date">
                    <div class="monthDayStr">
                        ${startMonthDay}
                    </div>
                    <div class="yearStr">
                        ${startYear}
                    </div>
                </div>
                <div class="axes">
                    <div class="topAxes">
                        <div class="mainString"></div>
                    </div>
                    <div class="timeIcon">
                        <img src="${sourceUrl}treeImg/timeIcon.png"/>
                    </div>
                </div>
                <div class="chushi">
                    初始
                </div>
            </div>
        </div>
        <div class="botBox">
            <div class="botText">
                数据来源: DTC++
            </div>
            <img src="${sourceUrl}treeImg/download.png"/>
        </div>
    </div>
</div>
</body>
</html>
